<template>
	<view class="mm-preview-media" :style="{'--primary': $theme.primary}">
		<!-- 录音预览 -->
		<view class="mm-preview-media__player" v-if="audio.length > 0">
			<view class="mm-preview-media__player__content" @click="playThisAudio(baseUrl + audio[0][audioUrl])">
				<w-audio-gif :paused="!audioPlaying"></w-audio-gif>
				<text>{{audio[0].duration + '"'}}</text>
			</view>
		</view>
		<w-gap v-if="audio.length > 0"></w-gap>
		<view class="mm-preview-media__preview">
			<!-- 图片预览 -->
			<block v-if="image.length > 0">
				<view
					class="mm-preview-media__preview__item"
					v-for="(item, index) in afterImage"
					:key="item.key"
				>
					<image
						lazy-load
						class="mm-preview-media__preview__item__image"
						mode="aspectFill" 
						:src="baseUrl + item[minimal]" 
						@click="previewImage(image, index)"
					></image>
				</view>
			</block>
			
			<!-- 视频预览 -->
			<block v-if="video.length > 0">
				<view
					class="mm-preview-media__preview__item"
					v-for="(item, index) in afterVideo"
					:key="item.key"
					@click="previewVideo(item[videoUrl])"
				>
					<image
						v-if="item.cover"
						class="mm-preview-media__preview__item__image"
						mode="aspectFill" 
						:src="baseUrl + item.cover"
					></image>
					<view v-else class="mm-preview-media__preview__item__image" style="background-color: #444444;"></view>
					<text
						class="mm-preview-media__preview__item__play iconfont icon-play"
					></text>
				</view>
			</block>
		</view>
		<!-- #ifndef H5 -->
		<video
			v-if="video.length > 0 && videoShow"
			:id="currentVideoId" 
			:src="baseUrl + currentVideoSrc"
			class="mm-preview-media__video"
			:show-center-play-btn="showCenterPlayBtn"
			@fullscreenchange="fullscreenChange"
		></video>
		<!-- #endif -->
		<!-- #ifdef H5 -->
		<w-popup
			v-if="video.length > 0"
			v-model="videoShow"
			mode="center"
			closeable
			:mask-close-able="false"
			border-radius="8"
		>
			<view style="width: 80vw; height: 350rpx; padding: 20rpx; background-color: #000000;">
				<video
					:id="currentVideoId" 
					:src="baseUrl + currentVideoSrc"
					:show-fullscreen-btn="false"
					style="width: 100%; height: 100%;"
					:show-center-play-btn="false"
				></video>
			</view>
		</w-popup>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		props: {
			/**
			 * 结构如下
			 * image: [{minimal: String, original: String}]
			 * video: [{url: String, cover: String}]
			 * audio: [{url: String, duration: Number}]
			 * 注：audio只支持一个文件，为保证数据格式统一，所以写成相同的数组结构
			 */
			image: {
				type: Array,
				default: () => []
			},
			video: {
				type: Array,
				default: () => []
			},
			audio: {
				type: Array,
				default: () => []
			},
			baseUrl: {
				type: String,
				default: ''
			},
			minimal: {
				type: String,
				default: 'minimal'
			},
			original: {
				type: String,
				default: 'original'
			},
			videoUrl: {
				type: String,
				default: 'path'
			},
			audioUrl: {
				type: String,
				default: 'path'
			}
		},
		data() {
			return {
				// 视频
				videoShow: false,
				videoContext: null,
				currentVideoSrc: '',
				currentVideoId: this.$w.guid(),
				// 音频
				audioPlaying: false // 是否正在播放
			}
		},
		mounted() {
			if (this.video.length > 0) {
				this.videoContext = uni.createVideoContext(this.currentVideoId, this);
			}
		},
		computed: {
			showCenterPlayBtn() {
				// #ifdef MP-WEIXIN
				return false;
				// #endif
				// #ifdef APP-VUE
				return true;
				// #endif
			},
			// 为视频,照片列表赋予key
			afterImage() {
				return this.image.map((item, index) => ({
					...item,
					key: 'image' + index
				}))
			},
			afterVideo() {
				return this.video.map((item, index) => ({
					...item,
					key: 'video' + index
				}))
			}
		},
		beforeDestroy() {
			if (this.audioPlaying) { // 如果该组件正在播放，则销毁
				this.$audioController.destroyAudio();
			}
		},
		methods: {
			// 预览图片
			previewImage(array, index) {
				uni.previewImage({
					urls: array.map(item => this.baseUrl + item[this.original]),
					current: index
				})
			},
			// 预览视频
			previewVideo(src) {
				this.currentVideoSrc = src;
				this.videoShow = true;
				this.$nextTick(() => {
					// #ifndef H5
					this.videoContext.requestFullScreen({
						direction: 0
					});
					// #endif
					this.videoContext.play();
				})
			},
			// 监听全屏退出事件
			fullscreenChange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.pause();
					this.videoShow = false;
				}
			},
			// 播放录音
			playThisAudio(src) {
				this.$audioController.playAudio(this, src);
			}
		}
	}
</script>

<style lang="scss" scoped>
	@font-face {font-family: "iconfont";
		src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAKUAAsAAAAABkAAAAJJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCCcApIYAE2AiQDCAsGAAQgBYRtBzMbiQXIHpIkkAIhBIh2fQwAIYL4tdfZuxcCkIgaUMioGBELrBKV6vrqChNXUF8XjbijtTaPSmjT8DdLuCfdu5s98b1BrXRCo0IJFgqERqQfIAw9+TyX07urgAKZHyjHtTdN6gXUiwMp0D2wTVYkkTeMXeASzhOo1m9Uam92eRvaJNa0QFzapoC2XECSWLpSKK9Zm8STZpXZdfYBPIbfj//y0UamLGdVHV7MGDD+Czsrvyru7PmEIAhocxlyzAKJOK1N7GsUjNmoOtFkGOyrPPhFUfgmsVe9YH+dVVoLeqHgnoSu6FbTGdzWQM1A16hHEc2XxtvP9Ocoe/9WuZ2i9x+jr0v9I9+VhbXel6qBqOPtE97lfmypZ814MQ5QlPIveT+kEHzUwGHv2n9lTQKlnQl9RSnp5wKV+3AG/0LYsy3pYsuYJVVY251pPkdNtWoUsKfZ71hN24kzoVLbCFeFvhS5SqNkYsyiTI05lKu0iWoz5jbXaKE0ilSFac8AodErMvW+Itfog0yMH5Rp94dyjdGIaufRsmeN8bA7dhUJJgO1c7T1MJCOmTui8k0yjz2hsuKQtUsqscOYS2eL6TkKSM2xIDkx88wSpQp9nAWXkeeFGKnQIZ3TFnNUz2Rk3ZvSeuhDh10KERgxIM05ZNOFAtLvzTpKn99ETMc8gmppqfHvIkrCHh7lpGV7kHOKoFfLvVyTOGHKY0xCkhLyoVkwing8IRTVj3IQHUuzRsQidRm7k+yrSK+v8r9uH1SztFnY9lzVnecfRp44BwAA') format('woff2')
	}
	
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 32rpx;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.icon-play:before {
		content: "\e60f";
	}
	.mm-preview-media {
		width: 100%;
		position: relative;
		overflow: hidden;
		&__player {
			display: flex;
			align-items: center;
			&__content {
				height: 55rpx;
				width: 220rpx;
				background: var(--primary);
				border-radius: 8rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				box-sizing: border-box;
				padding: 0 20rpx;
				image {
					height: 30rpx;
					width: 120rpx
				}
				text {
					color: #fff;
					font-size: 28rpx;
				}
			}
		}
		&__preview {
			flex-wrap: wrap;
			display: flex;
			margin-bottom: -20rpx;
			&__item {
				height: 140rpx;
				width: 140rpx;
				margin-bottom: 20rpx;
				margin-right: 20rpx;
				position: relative;
				&__image {
					height: 100%;
					width: 100%;
				}
				&__play {
					height: 60rpx;
					width: 60rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					background: rgba(0, 0, 0, 0.5);
					color: #FFF;
					font-size: 30rpx;
					border-radius: 50%;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}
		&__video {
			position: absolute;
			right: -110%;
		}
	}
</style>
